<template>
    <div class="musiclist">
        <h1>文章列表</h1>
        <br />
        <el-table :data="items" border>
            <el-table-column type="index" label="索引" width="35" />
            <el-table-column
                show-overflow-tooltip
                prop="name"
                label="文章名"
                width="200"
            />
            <el-table-column
                show-overflow-tooltip
                prop="artist"
                label="作者"
                width="150"
            />
            <el-table-column
                show-overflow-tooltip
                prop="pic_url"
                label="图片地址"
            />
            <el-table-column fixed="right" label="操作" width="175">
                <template slot-scope="scope">
                    <el-button
                        @click="$router.push(`/news/edit/${scope.row._id}`)"
                    >
                        编辑
                    </el-button>
                    <el-button @click="remove(scope.row)" type="danger">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
// @ is an alias to /src

export default {
    name: "NewsList",
    components: {},
    data() {
        return {
            items: [],
            total: 0,
            current: 1,
            size: 10,
        };
    },
    created() {
        this.fetch();
    },
    methods: {
        async fetch(par = {}) {
            let params = Object.assign(
                {},
                { current: this.current, size: this.size },
                par
            );
            try {
                const { data } = await this.$http.get("rest/news/list", {
                    params,
                });
                this.total = data.count;
                this.items = data.items;
                console.log(data.items);
            } catch (error) {
                console.log(error);
            }
        },
        handleSizeChange(val) {
            this.size = val;
            this.fetch();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.fetch();
        },
        async remove(row) {
            this.$confirm(`是否确定要删除该文章? "${row.name}"`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const res = await this.$http.delete(
                    `rest/news/delete/${row._id}`
                );
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
                this.fetch();
            });
        },
    },
};
</script>

<style scoped>
.el-table td {
    max-height: 100px;
    overflow: hidden;
}
</style>
